<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分类管理 - 手语学习平台</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="../css/admin.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 侧边栏 -->
        <nav
          id="sidebar"
          class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
        >
          <div class="position-sticky pt-3">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link" href="signs.html"> 手语管理 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="categories.html"> 分类管理 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" onclick="logout()"> 退出登录 </a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
          >
            <h1 class="h2">分类管理</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <button
                type="button"
                class="btn btn-primary"
                onclick="showAddCategoryModal()"
              >
                添加分类
              </button>
            </div>
          </div>

          <!-- 分类列表 -->
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>名称</th>
                  <th>描述</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="categoryList">
                <!-- 分类数据将通过JavaScript动态加载 -->
              </tbody>
            </table>
          </div>
        </main>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/admin/auth.js"></script>
    <script src="../js/admin/categories.js"></script>
    <script>
      // 页面加载完成后获取分类列表
      document.addEventListener("DOMContentLoaded", function () {
        checkAuth();
        loadCategories();
      });

      // 加载分类列表
      async function loadCategories() {
        try {
          const response = await fetch(
            "http://localhost:5000/api/admin/categories",
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem("adminToken")}`,
              },
            }
          );

          if (response.ok) {
            const categories = await response.json();
            const tbody = document.getElementById("categoryList");
            tbody.innerHTML = categories
              .map(
                (category) => `
                        <tr>
                            <td>${category.id}</td>
                            <td>${category.name}</td>
                            <td>${category.description || ""}</td>
                            <td>${new Date(
                              category.created_at
                            ).toLocaleString()}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="editCategory(${
                                  category.id
                                })">编辑</button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteCategory(${
                                  category.id
                                })">删除</button>
                            </td>
                        </tr>
                    `
              )
              .join("");
          } else {
            alert("获取分类列表失败，请检查网络连接或重新登录");
          }
        } catch (error) {
          console.error("加载分类列表错误:", error);
          alert("加载分类列表失败，请检查网络连接或重新登录");
        }
      }

      // 检查是否已登录
      function checkAuth() {
        const token = localStorage.getItem("adminToken");
        if (!token) {
          window.location.href = "login.html";
        }
      }

      // 退出登录
      function logout() {
        localStorage.removeItem("adminToken");
        window.location.href = "login.html";
      }
    </script>

    <!-- 添加分类的模态框 -->
    <div
      class="modal fade"
      id="addCategoryModal"
      tabindex="-1"
      aria-labelledby="addCategoryModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addCategoryModalLabel">添加分类</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addCategoryForm">
              <div class="mb-3">
                <label for="addCategoryName" class="form-label">分类名称</label>
                <input
                  type="text"
                  class="form-control"
                  id="addCategoryName"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="addCategoryDescription" class="form-label"
                  >分类描述</label
                >
                <textarea
                  class="form-control"
                  id="addCategoryDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitAddCategory()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑分类的模态框 -->
    <div
      class="modal fade"
      id="editCategoryModal"
      tabindex="-1"
      aria-labelledby="editCategoryModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editCategoryModalLabel">编辑分类</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editCategoryForm">
              <input type="hidden" id="editCategoryId" />
              <div class="mb-3">
                <label for="editCategoryName" class="form-label"
                  >分类名称</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="editCategoryName"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="editCategoryDescription" class="form-label"
                  >分类描述</label
                >
                <textarea
                  class="form-control"
                  id="editCategoryDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitEditCategory()"
            >
              保存更改
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
